import React, { Component } from 'react';

import './index.css';
/*
  学习目标：NavLink的使用
*/

import { BrowserRouter as Router, Route, Link, NavLink } from 'react-router-dom';

export default class App extends Component {
  render() {
    // 模糊匹配：url中的路径，包含to属性的路径，并且以to属性的路径开头
    //     url: /friend/123  ✅模糊匹配
    //     to : /friend

    //     url: /frien/123 ❌
    //     to: /freiend

    // 精准匹配：url和to属性的两个字符串，要一模一样，完全相等
    return (
      <Router>
        {/* NavLink也可以做跳转 */}
        {/* activeClassName 自定义高亮的类名 */}
        {/* exact表示精准匹配 */}
        <NavLink to="/home" activeClassName="xxx-xx-active" exact>
          点我跳到home
        </NavLink>
        <br />
        <NavLink to="/my" activeClassName="xxx-xx-active">
          点我跳到my
        </NavLink>
        <br />
        <Link to="/friend">点我跳到friend</Link>
        <Route path="/home" component={Home}></Route>
        <Route path="/my" component={My}></Route>
        <Route path="/friend" component={Friend}></Route>
      </Router>
    );
  }
}

function Home() {
  return <h1>我是Home组件</h1>;
}

function My() {
  return <h1>我是Find组件</h1>;
}
function Friend() {
  return <h1>我是Friend组件</h1>;
}
// 提问：
// Link和NavLink的区别？
// NavLink自带高亮类名

// activeClassName的作用？
// 自定义高亮的类名

// exact的作用？
// 设置精准匹配
